<template>
  <div>
    <div
      style="
        border: #efefef solid 1px;
        height: calc(100vh - 100px);
        width: 100%;
      "
    >
      <relation-graph ref="graphRef" :options="options" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref } from "vue";
import RelationGraph from "relation-graph-vue3";
const graphRef = ref<RelationGraph>();
const options = {
  defaultExpandHolderPosition: "right",
};
onMounted(() => {
  const jsonData = {
    rootId: "a",
    nodes: [
      {
        id: "a",
        text: "A",
        type: "my-root-node",
        color: "#c8d300",
        nodeShape: 0,
        width: 100,
        height: 100,
        data: {
          imageUrl:
            "https://www.relation-graph.com/images/relation-graph-yellow-small.png",
        },
      },
      {
        id: "b",
        text: "B",
        type: "my-input-node",
        nodeShape: 1,
        fontColor: "#c8d300",
      },
      {
        id: "c",
        text: "C",
        type: "my-color-node",
        nodeShape: 1,
        color: "#519633",
        width: 80,
        height: 60,
      },
      { id: "e", text: "E", type: "my-cool-node", color: "red" },
      { id: "f", text: "F", nodeShape: 0, width: 100, height: 100 },
      { id: "g", text: "G", nodeShape: 1, width: 100, height: 50 },
    ],
    lines: [
      { from: "a", to: "b", text: "Line Text", color: "#519633" },
      { from: "a", to: "c", text: "Line Text",animation: 2 },
      {
        from: "a",
        to: "e",
        text: "Line Text",
        lineShape: 6,
        fromJunctionPoint: "border",
        toJunctionPoint: "left",
      },
      {
        from: "a",
        to: "f",
        text: "",
        color: "#519633",
        lineShape: 6,
        fromJunctionPoint: "border",
        toJunctionPoint: "bottom",
      },
      { from: "a", to: "g", text: "Text 1", color: "#519633", lineShape: 1 },
      { from: "a", to: "g", text: "Text 2", color: "#519633", lineShape: 1 },
      { from: "a", to: "g", text: "Text 3", color: "#519633", lineShape: 1 },
      {
        from: "f",
        to: "g",
        text: "",
        color: "#519633",
        lineShape: 6,
        fromJunctionPoint: "left",
        toJunctionPoint: "left",
      },
      {
        from: "f",
        to: "g",
        text: "",
        color: "#519633",
        lineShape: 6,
        fromJunctionPoint: "right",
        toJunctionPoint: "right",
      },
    ],
  };
  graphRef.value.setJsonData(jsonData);
});

const emits = defineEmits([]);
const props = defineProps({});
const state = reactive({});
onBeforeMount(() => {});
onMounted(() => {});
defineExpose({ state });
</script>
<style lang="scss" scoped></style>
